<template>
  <div class='works-notes' id="works-notes" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <div id="chart-notes"></div>
    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen" ></FullScreen>
  </div>
</template>
<script>
import FullScreen from '../../../components/fullScreen'
export default {
  components: {FullScreen},
  name: "",
  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: "10%",
          containLabel: true
        },
        //横坐标
        xAxis: [
          {
            type: "category",
            data: [
              "部门1",
              "部门2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "票数",
            type: "bar",
            barWidth: "60%",
            data: [
              {
                name: "部门1",
                value: "100",
                label: {
                  show: true,
                  position: "top",

                  formatter: ["{b|头片}"].join("\n"),
                  rich: {
                    b: {
                      backgroundColor: {
                        image:
                          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4127978443,3621625360&fm=111&gp=0.jpg"
                      },
                      width: 50,
                      height: 50,
                      color: "transparent"
                    }
                  }
                },
                itemStyle:{
                  color:'gold',
                  barBorderRadius:5,
                  shadowColor:'rgba(0,0,0,.5)',
                  shadowOffsetX:1
                }
              },
            ]
          }
        ]
      },
      myChart: null,

      isFullScreen: false,//是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false,// 隐藏
    };
  },
  methods: {
    showChart() {
      this.myChart = echarts.init(document.getElementById("chart-notes"));
      this.myChart.setOption(this.options);
    },

    // 刷新图
    flashChart() {
      this.myChart.setOption(this.options);
    },

    // 改变尺寸
    resizeChart(){
      this.myChart.resize() 
    },
    fullScreen() {
      _g.fullScreen("works-notes",this,this.resizeChart);
    },
    showFullScreen(e) {
      var mouseY=e.clientY-document.querySelector("#works-notes").clientHeight
      var heightModel=this.isFullScreen?"-40":"160"
      if(mouseY>heightModel){
        this.hiddenFull = true;
      }else{
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen(){
      this.hiddenFull = false;
    }
  },
  created() {
    var that=this
    window.onresize=function(){
      var show = document.querySelector("#works-notes").clientHeight==document.querySelector('html').clientHeight
      that.$set(that,"isFullScreen",show)
      console.log(that.isFullScreen)
      if(!show)that.resizeChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.showChart();
      }, 100);
    });
  },
  beforeDestroy(){
    window.onresize=null
  }
};
</script>
<style lang="scss" scoped>
.works-notes {
  height: 100%;
  flex-grow: 1;
  display: flex;
  position: relative;
  overflow: hidden;

  #chart-notes {
    width: 100%;
    min-height: 300px;
    background-color: #fff;
    flex-grow: 1;
  }
}
</style>